<template>
  <div>
    <a-modal
      title="修改地址"
      :width="400"
      :confirm-loading="addressModalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      :visible="visible"
      @ok="onSetAddress()"
      @cancel="$emit('update:visible', false)"
    >
      <a-form>
        <a-form-item>收件人：<a-input v-model="address.name"/></a-form-item>
        <a-form-item>电话：<a-input style="width:100%;" v-model="address.phone" type="phone"/></a-form-item>
        <a-form-item prop="Area">
          地区：
          <city-select v-model="area" :props="{ expandTrigger: 'hover' }" data-type="area" value-type="2">
          </city-select>
        </a-form-item>
        <a-form-item>详细地址：<a-input v-model="address.detail"/></a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import CitySelect from '@/components/CitySelect/CitySelect'
import { setAddress } from '@/api/purchase/supplier'
export default {
  components: {
    CitySelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      default: ''
    },
    order: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      area: [],
      address: {},
      addressModalLoading: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (!this.order) return
    this.address = {
      name: this.order.name,
      phone: this.order.mobile,
      detail: this.order.address
    }

    this.area = [this.order.province, this.order.city, this.order.district]
  },
  updated() {},
  methods: {
    onSetAddress() {
      var params = {
        order_id: this.orderId,
        address_data: JSON.stringify({
          name: this.address.name,
          mobile: this.address.phone,
          address: this.address.detail,
          province: this.area[0],
          city: this.area[1],
          district: this.area[2]
        }),
        seller_comments: ''
      }
      setAddress(params)
        .then(res => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg
            })
          } else {
            this.$message.success('修改成功')
            this.$emit('update:visible', false)
            this.$emit('onAfterClose')
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style scoped></style>
